<template>
  <div class="container1">
    <div class="top">
      <van-nav-bar

          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
      />
    </div>

    <div class="body">
      <div class="img">
        <van-image
            width="100%"
            height="100%"
            fit="cover"
            :src="item.img"
        />
      </div>

      <div class="box">
        <div class="name">
          {{ item.name }}
        </div>
        <div class="desc">
          <span>{{ item.download }}人下载</span>
          <span>{{ item.visit }}人浏览</span>
        </div>

        <div class="info" style="font-size: 14px;color:#909399 ">
          <div class="title" style="color:#606266 ;font-size: 14px;margin-bottom: 10px">
            <van-icon name="label-o"/>
            游戏简介
          </div>
          <div style="letter-spacing: 2px;line-height: 25px;">
            {{ item.info }}
          </div>
        </div>
        <div class="lang">
          <van-icon name="setting-o"/>
          支持语言：{{ item.language }}
        </div>
        <div class="lang">
          <van-icon name="diamond-o"/>
          资源类别：{{ item.category }}
        </div>
      </div>


      <div class="btn">
        <div v-if="!online">
          <van-icon name="points"/>
          <span> {{ item.score }}</span>
        </div>
        <div v-else>
          <tiny-select v-model="item.score">
            <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </tiny-option>
          </tiny-select>
        </div>
        <van-button type="primary" @click="purchase">兑换游戏</van-button>
      </div>

    </div>

  </div>
</template>

<script setup>
import {showDialog} from 'vant';
import {useRouter, useRoute} from "vue-router";
import {inject, ref, onMounted} from "vue";
import {showConfirmDialog} from 'vant';
import {showNotify} from "vant";
import {Select as TinySelect, Option as TinyOption} from '@opentiny/vue'
import time from "../utils/time"
const options = ref([{
  value:12,
  label:"12积分/使用时长12h"
},
  {
    value:24,
    label:"24积分/使用时长24h"
  }])
const online = ref(false)
const axios = inject("axios")
const router = useRouter();
const route = useRoute();
const id = ref(0)
const onClickLeft = () => {
  router.back()
}
const QQ = ref("")
const item = ref({})
onMounted(() => {
  var t = localStorage.getItem("member")
  if(t==null||t==0||time(t)<0){
    showNotify({type: 'danger', message: "请先充值会员"});
    router.push("/index")
  }
      var path = route.path
      var idx = path.split('/')
      id.value = idx[2]
      QQ.value = window.localStorage.getItem("qq")
      axios.get('goods?id=' + id.value).then(res => {
        item.value = res.data.data
        if (item.value.category == "在线") {

          online.value = true
          axios.get('goods/changed?qq=' + QQ.value + '&account=' + item.value.name).then(res => {
            if (res.data.data == 1) {
              getPwd()
            } else get_count()
          })

        }
      }).catch(err => {
        showNotify({type: 'danger', message: "网络异常"});
      })
    }
)
const getAccount = (msg) => {
  axios.get("goods/account?id=" + id.value).then(res => {
    var data = res.data.data
    item.value.account = data.account
    item.value.pwd = data.pwd
    showDialog({
      title: msg,
      message: '账号：' + item.value.account + " 密码：" + item.value.pwd,
      theme: 'round-button',
    }).then(() => {
      router.back()
    });
  }).catch(err => {
    showNotify({type: 'danger', message: "网络异常"});
  })
}
const getPwd = () => {
  axios.get("goods/code?account=" + item.value.name + "&qq=" + QQ.value + "&time=" + item.value.score).then(res => {
    var data = res.data.data
    if (data.length < 16) {
      showNotify({type: 'danger', message: data})
      return
    }

    console.log(12)
    router.push("/online/" + data)
  }).catch(err => {
    showNotify({type: 'danger', message: "网络异常"});
  })
}
const get_count = () => {
  axios.get("record/count?qq=" + QQ.value).then(res => {
    if (res.data.data > 1) {
      showNotify({
        type: 'danger',
        message: "你已经购买了" + res.data.data + "个账号了，请下线已购买的游戏后再进行购买操作"
      })
      router.back()
    }
  })
}
const purchase = () => {
  if (online.value) {

    if (QQ.value != null && QQ.value != undefined && QQ.value.length > 4) {
      showConfirmDialog({
        title: '购买提示',
        message:
            '购买后不支持退货，一次只能同时买一个账号',
      }).then(() => {

        axios.get("record/count?qq=" + QQ.value).then(res => {
          if (res.data.data > 1) {
            showNotify({
              type: 'danger',
              message: "你已经购买了" + res.data.data + "个账号了，请下线已购买的游戏后再进行购买操作"
            })
            router.back()
          }else getPwd()
        })
      })
    }
  } else {
    change()
  }
}
const buy_offline = () => {
  axios.get('goods/change?name=' + item.value.name + '&qq=' + QQ.value).then(res => {
    if (res.data.data) {
      getAccount("保管好账号")
    } else showNotify({type: 'danger', message: "购买失败"})
  }).catch(err => {
    showNotify({type: 'danger', message: "网络异常"})

  })

}
const change = () => {
  if (item.value.count == 0) {
    showNotify({type: 'danger', message: "该账号当前正由他人使用，请1小时后尝试获取"})
  } else {

    if (QQ.value != null && QQ.value != undefined && QQ.value.length > 4) {
      axios.get("record/change?name=" + item.value.name + "&qq=" + QQ.value).then(res => {
        if (res.data.data) {

          showConfirmDialog({
            title: '购买提示',
            message:
                '购买后不支持退货，一次只同时能买一个账号，账号密码可以在游戏记录查看',
          }).then(() => {

            axios.get("record/count?qq=" + QQ.value).then(res => {
              if (res.data.data > 1) {
                showNotify({
                  type: 'danger',
                  message: "你已经购买了" + res.data.data + "个账号了，请下线已购买的游戏后再进行购买操作"
                })
                router.back()
              } else {
                buy_offline()
              }
            })
          })
              .catch(() => {
                // on cancel
              });

        } else {
          getAccount("你已经购买过了")
        }
      })
    } else router.push("/login")


  }
}


</script>

<style scoped lang="less">

.container1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  .top {
    width: 100%;
    margin: 0 auto;
  }

  .body, .btn {
    max-width: 480px;
    width: 90%;
    margin: 10px auto;
  }

  .img {
    width: 95%;
    height: width/2;
    margin: 0 auto;
    margin-bottom: 10px;
    overflow: hidden;

  }

  .box {
    background-color: #ffffff;
    border-radius: 10px;
    margin: 10px auto;
    width: 95%;
    margin-bottom: 50px;
    border: transparent 1px solid;

    .name {
      font-size: 14px;
      font-weight: 500;
      color: #303133;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      margin: 10px;
      line-height: 20px;
      width: 98%;
      text-align: start;
    }

    .desc {
      width: 98%;
      border-bottom: #EBEEF5 1px solid;
      display: flex;
      justify-content: space-between;
      color: #C0C4CC;
      font-size: 13px;
      padding: 10px;
      margin: 0 auto;
      box-sizing: border-box;
    }

    .lang {
      width: 98%;
      color: #909399;
      font-size: 14px;
      padding: 10px;
      margin: 0 auto;
      box-sizing: border-box;
      text-align: start;
    }

    .info {
      width: 98%;
      color: #303133;
      font-size: 14px;
      padding: 10px;
      margin: 0 auto;
      box-sizing: border-box;
      text-align: start;
      letter-spacing: 2px;
    }

  }

  .btn {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    background-color: rgba(255, 255, 255, .5);
    border-radius: 35px;
    box-sizing: border-box;
    padding: 20px;
    font-size: 20px;

    span {
      font-weight: 700;
      font-size: 25px;
      color: red;
    }
  }
}

</style>